import React from 'react';
import css from './index.less';
import { Slider } from 'antd';
import PropTypes from 'prop-types';
import { isEmpty } from 'lodash';
import classnames from 'classnames';

class Range extends React.Component {

  static propTypes = {
    label: PropTypes.string,
    max: PropTypes.number,
    min: PropTypes.number,
    step: PropTypes.number,
    value: PropTypes.any,
    marks: PropTypes.object,
    onChange: PropTypes.func,
  };

  static defaultProps = {
    label: '二级标题',
    max: 100,
    min: 0,
    step: 1,
    value: 0,
    marks: {},
    onChange: () => {},
  };

  onChange = (e) => {
    const { onChange } = this.props;
    let val = e.target ? e.target.value : e;
    val = parseFloat(val) || 0;
    onChange(val);
  };

  render() {
    let { label, min, max, step, value, marks, textWidth } = this.props;
    const props = {
      className: classnames(css.row, {
        [css.hasMarks]: !isEmpty(marks),
      }),
    };
    return (
      <div {...props}>
        <div className={css.label} style={{width: textWidth}}>
          &bull; {label}
        </div>
        <div className={css.sliderBox}>
          <Slider
            min={min} max={max}
            marks={marks}
            onChange={this.onChange.bind(this)}
            value={value}
            step={step} />
        </div>
        <input className={css.input} onChange={this.onChange.bind(this)} value={value}/>
      </div>
    );
  }
}
export default Range;
